<template>
  <div class="p-4">
    <div class="add_project">
      <a-button
        type="primary"
        @click="addOrEditAnnouncementsFn('add')"
        v-if="isButtonVisible(15000001)"
        >添加公告</a-button
      >
    </div>
    <div class="ant_table">
      <Table
        style="height: 100%"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="tableChangeFn"
      >
        <!-- <template #contract="{ record }">
          <div class="file_download" @click="fileDownloadFn(record)">附件下载</div>
        </template> -->
        <template #action="{ record }">
          <div class="action">
            <div @click="addOrEditAnnouncementsFn('edit', record)" v-if="isButtonVisible(15000002)"
              >修改</div
            >

            <Popconfirm
              :title="`您确定要删除${record.title}吗？`"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirmDeletion(record)"
            >
              <div v-if="isButtonVisible(15000003)">删除</div>
            </Popconfirm>
          </div>
        </template>
      </Table>
    </div>
    <!-- 新增/编辑公告弹窗 -->
    <AddOrEdit ref="addOrEditRef" @reload="getTableData"></AddOrEdit>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Form, FormItem, DatePicker, Upload, InputNumber } from 'ant-design-vue';
  import { Table, message, Popconfirm } from 'ant-design-vue';
  import { noticeQueryApi, noticeRemoveApi } from '/@/api/announcements';
  import { useRouter, useRoute } from 'vue-router';
  import AddOrEdit from './components/addOrEdit.vue';
  const route = useRoute();
  const router = useRouter();
  const isButtonVisible = (id) => {
    let rulesArr = route?.meta?.rules?.map((rule) => rule.id) || [];
    return rulesArr.includes(id);
  };
  const columns = ref([
    {
      title: '标题',
      dataIndex: 'title',
      width: 300,
      align: 'left',
      ellipsis: true,
    },
    {
      title: '公告内容',
      dataIndex: 'content',
      align: 'left',
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      width: 100,
      align: 'left',
      ellipsis: true,
    },
  ]);
  const dataSource = ref([]);
  onMounted(() => {
    getTableData();
  });
  const getTableData = () => {
    noticeQueryApi({
      page: pagination.value.current,
      limit: pagination.value.pageSize,
    }).then((res) => {
      pagination.value.total = res.total;
      dataSource.value = res.items;
    });
  };

  // table变化时出发  筛选/跳转
  const tableChangeFn = (e) => {
    pagination.value.current = String(e.current);
    pagination.value.pageSize = String(e.pageSize);
    console.log(e, 'e');
    getTableData();
  };

  //分页器对象
  const pagination = ref({
    current: '1',
    pageSize: '10',
    pageSizeOptions: ['10', '20', '50', '100'],
    total: 0,
    showTotal: (totals) => `总${totals}条数据`,
    showSizeChanger: true,
  });

  // 打开 新增编辑弹窗
  const addOrEditRef = ref();
  const addOrEditAnnouncementsFn = (action, record?) => {
    console.log('asd');

    let data;
    if (action == 'add') {
      data = {};
    } else {
      data = {
        id: record.id,
        title: record.title,
        content: record.content,
      };
    }
    addOrEditRef.value.init(data);
  };

  // 删除
  const confirmDeletion = (record) => {
    noticeRemoveApi({
      id: record.id,
    }).then((res) => {
      if (res != false) {
        message.success('删除成功');
        getTableData();
      }
    });
  };
</script>

<style lang="less" scoped>
  .add_project {
    margin-bottom: 10px;
  }
  .action {
    > div {
      text-align: left;
      color: #1990ff;
      cursor: pointer;
      margin: 5px 0;
    }
  }
</style>
